<template>
	<view class="container">
		<div @tap="back" class="back">←</div>
		<swiper @change="change" class="swipers" :vertical="swiperData.vertical"
			:easing-function="swiperData.easingFunction" :autoplay="swiperData.autoplay" :interval="swiperData.interval"
			:duration="swiperData.duration">
			<!-- :key="p.key" -->
			<swiper-item v-for="(p,i) in pages" :key="i">
				<view class="swiper-item" :class="swiperData.index==i?'click_cut':'click_cut2'">
					<uv-parse :content="p"></uv-parse>
				</view>
			</swiper-item>
		</swiper>
		<div class="titletext">
			<button open-type='share' class='sharebutton radius shadow-blur'>
				<div class="shareview">分享给好友</div>
			</button>
			<button open-type='share' class='sharequn radius shadow-blur'>
				<div class="shareview">分享到群</div>
			</button>
		</div>
	</view>
</template>
<script>
	export default {
		name: 'order_form',
		components: {},
		data() {
			return {
				swiperData: {
					index: 0, //滚动到第几页
					autoplay: false, //是否自动滚动
					vertical: true, //是否竖屏
					interval: 5000, //滚动时常
					duration: 500, //动画时常
					easingFunction: 'easeInOutCubic', //指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
				},
				pages: [],
				isplaying: true,
				from: 'list',
				musicsrc: '',
				innerAudioContext: [],
				ano: '',
				imgUrl: '',
				canvasshow: false,
				timeslotavatar: [],
				appheight: '',
				autoplay: false,
				interval: 0,
				duration: 600,
				cur: 0,
				nickname: '朋友',
				avatar: '',
				buttontext: '定制自己的个性祝福'
			}
		},
		mounted() {},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			this.getArticleDetail(options.ano);
			uni.getSystemInfo({
				success: (res) => {
					this.appheight = res.windowHeight;
				}
			})
		},
		onUnload: function() {
			//离开页面是停止播放音乐
			// this.innerAudioContext.stop();
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			change(e) {
				this.swiperData.index = e.target.current || e.detail.current;
			},
			getArticleDetail(id) {
				const that = this;
				let data = {
					'ano': id
				};
				this.$apis.getCardArticle(data).then(res => {
					if (res.detail) {
						// that.detail = res.detail;
						// if(res.detail.content){
						// 	res.detail.content.map((row)=>{
						// 	})
						// }
						// console.log('res.detail.content',res.detail.content);
						that.pages = res.detail.content;
						that.ano = res.detail.ano;
						that.imgUrl = res.detail.floatthumb;
						that.timeslotavatar = res.timeslotavatar
						if (res.detail.floatthumb) {
							that.canvasshow = true;
							this.createStar(this.imgUrl)
						}
						this.startmusic(res.detail.music);

					} else {
						setTimeout(function() {
							wx.reLaunch({
								url: '/pages/index/index'
							})
						}, 500)
					}
				});
			},
			startmusic(music) {
				let that = this;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = music;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},
			stopmusic() {
				if (this.isplaying) {
					this.innerAudioContext.pause();
					this.isplaying = false;
				} else {
					this.innerAudioContext.play();
					this.isplaying = true;
				}
			},
		},
		onShareAppMessage: function() {
			console.log('this.detail.sharethumb', this.detail.sharethumb);
			return {
				title: this.detail.sharetitle,
				path: '/pages/index/index?ano=' + this.detail.ano + '&from=share&t=' + this.fixedtime,
				imageUrl: this.detail.sharethumb,
				success: function(res) {
					// 转发成功
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #333;
	}

	.swipers {
		width: 750rpx;
		height: 100vh;
	}

	.swiper-item {
		width: 750rpx;
		height: 100vh;
	}

	.click_cut {
		animation: fadeInOut1 0.5s linear both;
	}

	.click_cut2 {
		animation: fadeInOut2 0.5s linear both;
	}

	.detailtitle {
		display: flex;
		width: 100%;
		height: 114rpx;
		line-height: 94rpx;
		color: #000;
		margin-top: 44px;
		position: absolute;
		z-index: 9999;
		margin-bottom: 100px;

	}

	.sharebutton {
		background: #09bb07;
		color: #fff;
		line-height: 80rpx;
		float: left;
		left: 5%;
		width: 40%;
		border-radius: 5px;
	}

	.titletext {
		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 100%;
		position: fixed;
		bottom: 60rpx;
	}

	.userinfo-avatar {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 50rpx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.userinfo {
		position: absolute;
		width: 350rpx;
		height: 320rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		top: 230rpx;
		left: 230px;
	}

	.avatarpic {

		position: absolute;

		left: 220px;
	}



	.share {
		display: flex;
		width: 100%;
		line-height: 64rpx;
		height: 120rpx;
		color: white;
		align-items: center;
		text-align: center;
		background: #000;
		justify-content: center;
		position: absolute;
		z-index: 9999;

	}

	.sharegif {
		width: 50rpx;
		height: 50rpx;

	}

	.shareview {

		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.detailtitle {
		display: flex;
		width: 100%;
		height: 114rpx;
		line-height: 94rpx;
		color: #000;
		margin-top: 44px;
		position: absolute;
		z-index: 9999;
		margin-bottom: 100px;

	}

	.sharebutton {
		background: #09bb07;
		color: #fff;
		line-height: 80rpx;
		float: left;
		left: 5%;
		width: 40%;
		border-radius: 5px;
	}

	.titletext {

		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 100%;
		position: fixed;
		bottom: 60rpx;


	}

	.sharequn {
		background: #e64340;
		color: #fff;
		float: right;
		right: 5%;
		line-height: 80rpx;
		width: 40%;
		border-radius: 5px;
	}

	.more {
		opacity: 1;
		height: 70rpx;
		color: white;
		width: 70rpx;
		position: absolute;
		right: 10rpx;
		top: 10%;
	}

	.playing {
		animation: rotate2d 2s linear infinite;
		-webkit-animation: rotate2d 2s linear infinite;
	}

	.control {
		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 7%;
		position: fixed;
		padding-left: 30rpx;
		right: 12rpx;
		top: 10%;
		background-size: contain;
		background-image: url("");


	}

	.play {

		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 7%;
		position: fixed;
		padding-left: 30rpx;
		right: 12rpx;
		top: 10%;

	}

	.swiper {
		height: 100vh;
	}

	.swiper-item {
		height: 100vh;
		padding-top: 160rpx;
	}

	.more image {

		width: 70rpx;
		height: 70rpx;
	}

	canvas {
		width: 100%;
		min-height: 100vh;
		position: fixed;
		top: 0;
		z-index: 888;
	}

	@-webkit-keyframes rotate2d {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	@keyframes rotate2d {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	//广告
	.adContainer {
		width: 100%;
		padding-bottom: 60rpx;
	}

	.back {
		width: 70rpx;
		height: 70rpx;
		position: fixed;
		top: 70rpx;
		left: 40rpx;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
		line-height: 70rpx;
		float: left;
		border-radius: 250px;
		background: rgba(0, 0, 0, 0.2);
		z-index: 9999;
		border: 1px solid #fff;
	}

	@keyframes fadeInOut1 {
		from {
			opacity: 0.7;
		}


		to {
			opacity: 1;
		}
	}

	@keyframes fadeInOut2 {
		from {
			opacity: 1;
		}


		to {
			opacity: 0.7;
		}


	}
</style>